<template>
<div class="collapseComponent">
  <div slot="reference"
       :class="{
                 'viewBox': true,
                 'active': editorItem.isEdit,
                 js_viewComponentBox: true,
                 vueEditor_viewComponentBox: true,
             }"
       :style="{
                 width: editorItem.viewWidth || '1190px'
             }"
       @click="handelClickView"
  >
    <slot name="componentView"></slot>
  </div>
    <!-- isEdit，强制惰性加载form，每次重新创建实例 -->
    <div v-if="editorItem.isEdit" class="formBox">
      <div class="editForm">
        <h4 class="formTitle">
          {{ editorItem.title }}
        </h4>
        <div class="form">
          <slot
              name="componentForm"
          ></slot>
        </div>
      </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'ViewComponentWrap',
    props: {
        isPreview: {
            type: Boolean,
            default: false
        },
        editorItem: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            style: {}
        };
    },
    beforeDestroy () {
        this.hideEditForm();
    },
    mounted () {
        this.editorItem.isEdit = true;
    },
    methods: {
    // 点击只能打开，并且打开状态下只能执行一次
        handelClickView (e) {
            if (!this.isPreview) {
                // 阻止浏览器默认事件
                e.preventDefault();
            }
            if (!this.editorItem.isEdit) { this.showEditForm(); }
        },

        // 显示编辑form
        showEditForm () {
            this.editorItem.isEdit = true;
            // 打开时才注册一个关闭事件，关闭弹窗时移除事件
            this.closeHandle = (event) => {
                // 点击的自己兄弟view关闭自己
                if (!this.$el.contains(event.target) && event.target.closest('.js_viewComponentWrap')) {
                    this.hideEditForm();
                }
            };

            // 点击其它弹窗关闭这里
            document.addEventListener('click', this.closeHandle, false);
        },
        hideEditForm () {
            this.editorItem.isEdit = false;
            document.removeEventListener('click', this.closeHandle);
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../_common/css/variable";
.collapseComponent{
  display: flex;
  justify-content: space-between;
}
.viewBox {
  /*width: 1190px;*/
  margin: 0 auto;
  position: relative;
  cursor: move;
  box-shadow: 0 0 2px 0 rgba(0,0,0,.25);
  outline: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  &>div {
    /*pointer-events: none;*/
  }
  &:after {
    pointer-events: none;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: box-shadow 0.3s ease;
    z-index: 2;
  }
  &:hover {
    &:after {
      box-shadow: 0 0 10px 1px color($colorPrimary 0.6) inset, 0 3px 14px 3px color($colorPrimary 0.7) inset;
    }
  }

  &.active {
    &:after {
      box-shadow: none;
    }
  }
}

.formBox {
  position: relative;
  width: 550px;
  display: flex;
  justify-content: space-between;
  &>div {
    box-shadow: 0 1px 6px 0 $colorBlack 0.25;
  }
}
:global .el-popper[x-placement^=left] {
  :local .formBox {
    flex-direction: row-reverse;
  }
}
.editBar {
  width: 26px;
  height: 121px;
  background: $colorWhite;
  &> .toolBarBtn {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    cursor: pointer;
    display: block;
    width: 26px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: $colorWhite;
    &:hover {
      opacity: 0.6;
    }
    &.topLine {
      border-top: 1px solid color($colorBlack 0.08);
    }
    &[disabled] {
      color: #999999;
      opacity: 0.3 !important;
      cursor: not-allowed;
    }
  }
}
.editForm {
  width: 100%;
  overflow: auto;
  padding: 0 14px;
  background: $colorWhite;
}
.formTitle {
  position: relative;
  padding-bottom: 12px;
  margin: 0;
  border-bottom: 1px solid color($colorBlack 0.08);
  font-weight: bold;
  text-align: center;
}
.form {
  padding: 10px 0;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
.close {
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: #999999;
  cursor: pointer;
  font-size: 18px;
}

.editFormpopper {
  width: 392px !important;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
</style>
